<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胡小埋的大屏</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>
<body>
   <!-- 头部 -->
   <header>
       <h1>胡小埋研究系列之十二星座</h1>
       <span>2022年6月3日15时12分19秒</span>
   </header>
    <!-- 头部 -->
    <!-- 内容 -->
    <section class="main">
        <div class="column">
            <div class="box box-left1" style="height: 4rem;"></div>
            <div class="box box-left2" style="height: 2.66rem;"></div>
            <div class="box box-left3" style="height: 2.66rem;"></div>
        </div>
        <div class="column">
            <div class="box box-center" style="height:100%;"></div>
           
        </div>
        <div class="column">
            <div class="box box-right1" style="height:50%;">
                <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <th scope="col">排名</th>
                            <th scope="col">星座</th>
                            <th scope="col">人口数量</th>
                            <th scope="col">增长率</th>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td>水象</td>
                            <td>1200万<br /></td>
                            <td>80%<br /></td>
                        </tr>
                        <tr>
                            <td><span>2</span></td>
                            <td>土象</td>
                            <td>800万</td>
                            <td>21%</td>
                        </tr>
                        <tr>
                            <td><span>3</span></td>
                            <td>火象</td>
                            <td>500万</td>
                            <td>12%</td>
                        </tr>
                        <tr>
                            <td><span>4</span></td>
                            <td>风象</td>
                            <td>300万</td>
                            <td>39%</td>
                        </tr>
                        
                        
                    </tbody>
                </table></div>
            <div class="box box-right2" style="height:50%;"></div>
            
        </div>
    </section>
    <!-- 内容 -->






    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <!-- 引入echarts -->
    <script src="http://unpkg.com/echarts"></script>
   

    <script src="./assets/js/left1.js"></script>   
    <script src="./assets/js/left2.js"></script>   
    <script src="./assets/js/left3.js"></script>   
    <script src="./assets/js/center.js"></script>
    <script src="./assets/js/right2.js"></script>
    <script>
        setInterval(() => {
            $('header span').html(wofDate.format('Y年m月d日H时i分s秒'))    
        },1000)
        </script>
        </body>
    
</body>
</html>
